import React, { Component } from 'react';

export default class Top3 extends Component {
  render () {
    const { list } = this.props
    const listItems = list.map(name => 
    <li className="top3__list-item" key={name}><span className="top3__list-text">{name}</span></li>
  )
    return (
      <div className="top3">
        <div className="flex-box">
          <div className="top3__icon" style={{ background: `linear-gradient(to bottom, ${this.props.colors})` }}> </div>
          <div className="top3__title">TOP3</div>
        </div>
        <ul className="top3__list">
          {listItems}
        </ul>
      </div>
    );
  };
}